<template>
  <div class="login-wrap">
    <div class="ms-login">
      <el-divider content-position="left"><span style="font-size: 20px">用户登录界面</span></el-divider>
      <el-form :model="param" :rules="rules" ref="param" label-width="0px" class="ms-content">
        <el-form-item prop="userId">

          <el-input v-model="param.userId" placeholder="请输入用户ID">
            <!-- <el-button slot="prepend" icon="el-icon-lx-people"></el-button> -->
          </el-input>
        </el-form-item>

        <el-form-item style="margin-top: 30px; margin-bottom: 30px" prop="password">

          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="param.password"
          >
            <!-- <el-button slot="prepend" icon="el-icon-lx-lock"></el-button> -->
          </el-input>
        </el-form-item>

        <div class="login-btn">
          <el-button type="primary" @click="submitForm('param')">登录</el-button>
        </div>
        <div style="text-align:center; margin-top:10px">

          <label class="changeRole" @click="changeRole()">切换至管理员</label>
        </div>



      </el-form>
    </div>
  </div>
</template>

<script>
  import loginUser from '../../api/login'
  import loginAdmin from '../../api/login'

  export default {
    data() {
      //----------检查用户ID------------
      var checkUserId = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户ID不能为空'));
        } else if (isNaN(value)) {
          return callback(new Error('用户ID只能为数字'));
        } else if (!Number.isInteger(parseFloat(value))) {
          return callback(new Error('用户ID只能为数字且不包含特殊字符'));
        } else if (value.toString().length != 10) {
          return callback(new Error('用户ID必须是10位数!'));
        } else return callback();

      };
      //----------检查用户密码------------
      var checkPwd = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        } else return callback();
      }
      return {
        param: {
          userId: '',
          password: ''
        },
        rules: {
          userId: [{validator: checkUserId, trigger: 'blur'}],
          password: [{validator: checkPwd, trigger: 'blur'}],
        }
      };
    },
    methods: {

      changeRole() {
        this.$router.push('/loginAdmin');
      },
      submitForm(info) {
        this.$refs[info].validate(valid => {
            if (valid) {
                loginUser.loginUser(this.param.userId, this.param.password)
                .then(response => {
                    if (response.data.name === undefined){
                      
                          this.$message({
                            message: response.data,
                            center: true,
                            type: 'error'
                        });
                    } else {
                      var loginMsg = response.status;
                      if (loginMsg === 200) {
                          this.$message({
                              message: '登录成功',
                              center: true,
                              type: 'success'
                          });
                          localStorage.setItem('ms_userId', this.param.userId);
                          localStorage.setItem('ms_username', response.data.name);
                          localStorage.setItem('ms_userCollege',response.data.college);
                          localStorage.setItem('ms_userpetName',response.data.petName);
                        
                          this.$router.push('/userCenter');
                      }
                      else {
                          this.$message({
                              message: '请输入正确的账号和密码',
                              center: true,
                              type: 'error'
                          });
                      }
                    }

                });
            } else {
                this.$message({
                    message: '请输入账号和密码',
                    center: true,
                    type: 'error'
                });
            }
        });
      },

    },
  };
</script>

<style scoped>

  .login-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-user.png);
    background-size: 100%;
    background-color: white;
  }

  .ms-title {
    width: 100%;
    line-height: 50px;
    text-align: left;
    font-size: 20px;
    color: black;
    /* border-bottom: 1px solid #ddd; */
  }

  .ms-login {
    position: absolute;
    left: 80%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    /* background: rgba(255, 255, 255, 0.3); */
    background: #ffffff;
    /* border: solid rgb(176, 176, 176) 1px; */
    overflow: hidden;
  }

  .ms-content {
    padding: 30px 30px;
  }

  .login-btn {
    text-align: center;
  }

  .login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
  }

  .login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
  }

  .changeRole {
    cursor: pointer;
    font-size: 15px;
    color: cornflowerblue;
  }
</style>
